// 这个插件文件，统一注册全局文件
import XtxSkeleton from '@/components/skeleton/index.vue'
import XtxCarousel from '@/components/carousel/index.vue'
import XtxMore from '@/components/more/index.vue'
import defaultImg from '@/assets/images/200.png' 
import {useIntersectionObserver} from '@vueuse/core'
import Bread from './Bread/index.vue'
import BreadItem from './Bread/Item.vue'
import XtxCity from '@/components/city/index.vue'
import XtxNumbox from '@/components/numbox/index.vue' 
import XtxButton from '@/components/button/index.vue' 
import XtxCheckbox from '@/components/checkbox/index.vue'
import {App} from 'vue'
export default {
    install(app: App) {
        // 构建组件
        app.component(XtxSkeleton.name,XtxSkeleton)
        app.component(XtxCarousel.name,XtxCarousel)
        app.component(XtxMore.name,XtxMore)
        app.component('XtxBread', Bread)
        app.component('XtxBreadItem', BreadItem)
        app.component('XtxCity', XtxCity)
        app.component('XtxNumbox', XtxNumbox)
        app.component('XtxButton', XtxButton)
        app.component('XtxCheckbox', XtxCheckbox)
        // 构建指令 
        app.directive('lazy',{
            mounted(el,binding) {
                const { stop } = useIntersectionObserver(
                    el,
                    ([{ isIntersecting }]) => {
                      //   isIntersecting为true时发送请求
                        if(isIntersecting) {
                            // 停止监听
                      stop()
                    //   给el元素设置sre属性
                      el.src = binding.value
                        }
                        // 如果图片加载失败，就显示一张默认图片
                      el.onerror = () => {
                        //   设置加载失败图片
                          el.src = defaultImg
                      }
                    },
                  )
            }
        })
    }
}